import React, { Component } from 'react'
import Left from './left'
import Fun from './fun'
 class App extends Component {
  state = {
      val:"" ,
      val1:"",
      flag:true
  }
  checkVal(e){
     console.log(e.target.value)
     this.setState({
         val:e.target.value
     })
  }
  checkVal1(event){
        console.log(event.target.value)
  }
  render() {
    return (
      <div>
           {/* 在react中获取input框值得方法要用受控组件或者非受控组件 */}
          <input type="text" value={this.state.val} onChange={this.checkVal.bind(this)}/>
          <span>{this.state.val}</span>
          <hr />
           {/* 下一行这种叫非受控组件 */}
          <input type="text" defaultValue={this.state.val1} onChange={this.checkVal1.bind(this)}/>
          <hr />
          <button onClick={()=>this.setState({flag:false})}>点击我</button>
          {
              this.state.flag?  <Left></Left>:""
          }
          {
              this.state.flag?  <Fun></Fun>:""
          }
      </div>
    )
  }
}

export default App